
import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    TouchableHighlight,
    TouchableOpacity,
    Navigator,
    LayoutAnimation
} from 'react-native';

import PasswordGesture from 'react-native-gesture-password';
import Home from './Home'

export default class Lock extends Component {
    constructor(props){
        super(props);
        this.state = {
            message: 'Please input your password.',
            status: 'normal'
        }

    }
    onEnd=(password)=> {
        if (password == '1236') {
            this.props.navigator.push({
                sceneConfig: Navigator.SceneConfigs.FloatFromRight,
                component: Home,
                params:{
                    name: 'Home页面'
                }
            })

            // your codes to close this view
        } else {
            this.setState({
                status: 'wrong',
                message: 'Password is wrong, try again.'
            });
        }
    }
    onStart=()=> {
        this.setState({
            status: 'normal',
            message: 'Please input your password.'
        });
    }
    onReset=()=> {
        this.setState({
            status: 'normal',
            message: 'Please input your password (again).'
        });
    }

    render() {
        return (
            <PasswordGesture
                ref='pg'
                status={this.state.status}
                message={this.state.message}
                onStart={() => this.onStart()}
                onEnd={(password) => this.onEnd(password)}
                interval={1}
            />
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    page1:{
        backgroundColor:'chocolate'
    },
    page2:{
        backgroundColor:'deeppink'
    },
    font:{
        fontSize:45
    }

});
